<template>
  <view class="container">
    <view class="title">作业题目</view>
    <textarea cols="30" rows="30" class="content" maxlength="-1" placeholder="请输入作业题目"></textarea>
    <!-- 上传图片容器 -->
    <view class="box">
      <!-- <image src="" mode="aspectFill" style="width: 220rpx; height: 220rpx"></image> -->
      <view class="imagebox"><image src="../../static/icon/upload.png" mode="aspectFill"></image></view>
    </view>
    <view class="tip">题目可通过输入框输入也可选择拍照上传</view>
    <view class="submit">提交</view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;

  .title {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #333333;
    margin: 28rpx 0 20rpx 30rpx;
  }
  .content {
    box-sizing: border-box;
    width: 690rpx;
    height: 330rpx;
    background: #f8f8f8;
    font-size: 28rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
    margin: 20rpx 30rpx;
    padding: 26rpx 30rpx;
  }
  .box {
    box-sizing: border-box;
    display: flex;
    margin: 20rpx 30rpx;
    .imagebox {
      width: 220rpx;
      height: 220rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .tip {
    box-sizing: border-box;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #999999;
    margin: 20rpx 30rpx;
  }
  .submit {
    box-sizing: border-box;
    position: absolute;
    bottom: 80rpx;
    left: 40rpx;
    width: 670rpx;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
    background: #3553e8;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
}
</style>
